<template>
  <base-container>
    <div
      class="h-45px px-20px bg-gradient-to-r from-[#E6F4FF] to-[#fff] leading-[45px] text-[#333] text-[14px] rounded-10px"
    >
      <i class="px-5px text-[#1777ff] iconfont ic-guanyushuoming" />
      <span class="text-[#170304]">以下是在你的经营类目范围内平台提供的商品，如你能接单请进行同步。</span>
    </div>
    <div class="mt-20px">
      <avue-table-search
        v-model="searchParams"
        :option="searchOption"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      />
    </div>
    <base-table-card>
      <template #header-right>
        <el-button type="primary" @click="handleBatchProcessingDataBaseButton"> 批量同步 </el-button>
      </template>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :header-cell-style="{ background: '#f8f7f7' }"
        v-model="formData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
        @row-save="loadAdd"
        @row-update="loadEdit"
        @selection-change="handleSelectionChange"
        @expand-change="handleExpandChange"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <template #rentPlan="{ row }">
          <div>{{ computedFormatterRentPlan(row.rentPlan) }}</div>
        </template>
        <template #rentObject="{ row }">
          <div>{{ computedFormatterRenPlan(row.rentObject) }}</div>
        </template>
        <template #id="{ row }">
          <div class="p-10px">
            <div class="flex bg-[#f8f7f7] py-5px rounded-5px px-20px justify-between">
              <div class="text-left text-ct2">
                商品编号：<span class="text-bd">{{ row.id }}</span>
              </div>
              <div @click="handleShowProductCode(row)">
                <i class="iconfont ic-erweimalunkuo text-bd cursor-pointer"></i>
              </div>
            </div>
            <div class="flex items-center py-8px">
              <el-image :src="row.imageUrl" style="width: 90px; height: 90px"></el-image>
              <div class="px-10px">
                <div class="flex text-left">
                  <div class="mx-10px">
                    <el-tag type="primary" size="small">{{ row.productType == "1" ? "全新" : "二手" }}</el-tag>
                  </div>
                  <div>{{ row.productName }}</div>
                </div>
                <div class="text-left text-12px pt-5px px-6px">
                  商品配件：<span class="text-ct5">{{ row.productComponentFlag == "1" ? "有" : "无" }}</span>
                </div>
                <div class="text-left text-12px pt-5px px-6px">
                  增值服务：<span class="text-ct5">{{ row.additionalServices ? row.additionalServices : "-" }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #productStatus="{ row }">
          <div>
            <el-tag :type="prductStatusTypeComputed(row.productStatus)">
              {{ prductStatusLabelComputed(row.productStatus) }}
            </el-tag>
          </div>
        </template>
        <template #expand="{ row }">
          <div class="children-table">
            <avue-crud
              :ref="el => (tableRef[row.id] = el)"
              :data="row.skuList"
              :option="tableOptionChildren"
              @selection-change="
                sections => {
                  handleSelectionChildrenChange(sections, row);
                }
              "
            >
            </avue-crud>
          </div>
        </template>
        <template #menu="{ row }">
          <el-button type="primary" text @click="handleDetailShow(row)"> 查看 </el-button>
        </template>
      </avue-crud>
    </base-table-card>
    <base-dialog v-model="isShowProductCode" :show-footer="false" title="商品二维码" width="404px">
      <div class="flex items-center pb-10px border-b-ct5">
        <div class="pr-10px">
          <el-image :src="productCode.imageUrl" class="w-[80px] h-[80px]" />
        </div>
        <span class="text-16px text-[#170304]">{{ productCode.productName }}</span>
      </div>
      <div>
        <div class="py-20px bg-pink-linear rounded-10px">
          <div class="text-center py-10px">
            <svg
              width="140"
              height="140"
              viewBox="0 0 140 140"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <rect x="0.5" y="0.5" width="139" height="139" rx="7.5" fill="white" />
              <rect x="0.5" y="0.5" width="139" height="139" rx="7.5" stroke="#E7E5E5" />
              <rect x="8" y="8" width="124" height="124" rx="8" fill="url(#pattern0_1166_20123)" />
              <defs>
                <pattern id="pattern0_1166_20123" patternContentUnits="objectBoundingBox" width="1" height="1">
                  <use xlink:href="#image0_1166_20123" transform="scale(0.00166667)" />
                </pattern>
                <image
                  id="image0_1166_20123"
                  width="600"
                  height="600"
                  preserveAspectRatio="none"
                  xlink:href=""
                />
              </defs>
            </svg>
          </div>
          <div class="text-center text-16px flex items-start justify-center">
            <div class="pt-2px">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M10.2966 2.39478L10.9333 2.53052L11.5632 2.76294L12.1775 3.07251L12.7781 3.53638L12.8035 3.55493L13.3318 4.11743L13.7585 4.77563L14.0779 5.49048L14.2654 6.40063L14.3123 6.69165L15.0251 6.82739L15.699 7.0979L16.323 7.44458L16.8591 7.88989H14.3259L14.113 8.62622L13.8279 9.3606L13.491 10.0383L13.1091 10.6584L12.6912 11.1985L12.199 11.7024L11.6453 12.1672L11.0349 12.5745L10.3552 12.9016L9.65015 13.1536L8.92358 13.3469L8.18335 13.4631L7.42944 13.5217H6.6687L5.90308 13.4631L5.14038 13.3665H5.03394L4.71069 13.3079L4.60718 13.2893L4.49878 13.2502L4.39429 13.2307H4.30151L4.52417 13.2112H4.74487L4.96753 13.1917H5.19019L6.38354 13.0374L7.5437 12.7678L8.27222 12.5159L8.96948 12.2444L9.63257 11.9153L10.2537 11.5286L10.8308 11.0823L11.3601 10.5813L11.8328 10.0383L12.2468 9.41821L12.5994 8.74243L12.8845 7.98755L13.0955 7.17407L13.1248 6.7688L13.0779 6.36157L12.8494 5.62622L12.5066 4.98853L12.1003 4.50415L11.6003 4.0979L10.9744 3.7688L10.2332 3.57446L9.38062 3.53638L8.65796 3.69067L8.00464 3.98169L7.43726 4.38794L6.96851 4.89185L6.61401 5.49048L6.28882 6.65259L6.28296 7.02075L6.31714 7.38696L6.34058 7.81274L5.99585 7.83228H5.67261L5.34937 7.85181L4.72534 7.96802L3.98315 8.27759L3.19702 8.89771L2.61206 9.74829L2.36011 10.4065L2.25757 11.0823L2.29468 11.761L2.45874 12.3801L2.73999 12.9788L3.12769 13.5022L3.60815 13.9475L4.17163 14.2961L4.80444 14.5286L5.50171 14.6448L5.84546 14.6643H6.19995L6.5564 14.6448H11.8582L11.9158 14.6643L11.9714 14.6838L12.0974 14.7415L12.2175 14.8176L12.3201 14.8948L12.4275 14.9719L12.8162 15.2239L12.8845 15.2629L13.0251 15.3596L13.113 15.4368L13.1843 15.4563L13.1863 14.6643L13.5281 14.6448H13.863L14.7322 14.509L15.3445 14.2571L15.8601 13.928L16.3689 13.4436L16.7527 12.8821L17.0085 12.2834L17.1443 11.6643L17.1619 11.0247L17.0623 10.4065L16.8494 9.80591L16.5281 9.26392L16.0984 8.76196L15.5652 8.35571L14.9939 8.0647L14.6531 7.94849L14.3259 7.89087H16.8591L16.8826 7.90942L17.3708 8.43286L17.7693 9.05103L18.072 9.70923L18.2634 10.4456L18.3279 11.1799V11.2571L18.2517 12.1096L18.0193 12.9016L17.6443 13.6379L17.0994 14.3547L17.0496 14.3928L17.0046 14.4514L16.1794 15.1077L15.4841 15.4563L15.2068 15.5725L15.1062 15.6116L15.0037 15.6311L14.9001 15.6692L14.7957 15.6887L14.3484 15.7659V17.6243L13.9402 17.3723L12.2292 16.2317L11.658 15.8635L11.6306 15.8049H6.11401L5.36304 15.7854L4.74878 15.7083L4.0105 15.4954L3.34839 15.1663L2.76538 14.761L2.26538 14.2766L1.85034 13.7542L1.5271 13.1731L1.24292 12.3801L1.11108 11.5862L1.1228 10.7942L1.26538 10.0188L1.53101 9.302L1.90308 8.64575L2.40112 8.04517L2.98999 7.54126L3.66187 7.13696L4.40991 6.82739L4.91284 6.72974L5.10327 6.69165L5.13843 6.55591L5.18042 6.16821L5.34937 5.51001L5.60132 4.89185L5.92847 4.34985L6.32495 3.84595L6.78101 3.42017L7.28784 3.05396L7.83862 2.76294L8.42163 2.55005L9.03101 2.41431L9.65894 2.37524L10.2966 2.39478ZM5.49878 11.1985L5.56421 11.3342L5.62866 11.4504L5.68823 11.5286L5.76929 11.5862L5.89331 11.6633L6.02319 11.7219L6.11987 11.7795L6.0271 11.8381L5.76343 11.9739L5.68628 12.0315L5.63257 12.1096L5.56616 12.2258L5.49683 12.3616L5.43433 12.4583L5.3728 12.3801L5.24292 12.1096L5.18237 12.0315L5.10522 11.9739L4.96753 11.9153L4.82983 11.8381L4.74683 11.7795L4.83374 11.7415L4.97729 11.6448L5.11499 11.5667L5.18823 11.5286L5.24683 11.4309L5.3103 11.3147L5.37476 11.1799L5.43433 11.1018L5.49878 11.1985ZM11.9197 5.89673L11.8962 6.47876L11.7957 7.07837L11.4529 8.12329L11.0828 8.80103L10.6179 9.41919L10.0701 9.94165L9.44409 10.387L8.29761 10.9475L7.72437 11.1213L6.67065 11.3342L6.77905 11.2961L7.12573 11.1799L7.81909 10.8518L8.45483 10.4651L9.02417 10.0002L9.52515 9.49634L9.9519 8.91724L10.2966 8.27759L10.5544 7.58032L10.7185 6.80786L10.7693 6.16821L10.7712 5.97485V5.87817L10.7849 5.64575L11.9197 5.89673Z"
                  fill="#F11921"
                />
              </svg>
            </div>
            <div class="pl-3px text-[#170304] text-16px font-600">青云租 轻松租</div>
          </div>
          <div class="text-center text-ct5">打开app/支付宝/微信扫一扫，轻松租赁</div>
        </div>
        <ProductIconGroup></ProductIconGroup>
      </div>
      <div class="text-center pt-20px">
        <el-button type="default" class="w-170px h-40px" size="large" @click="handleProductCodeButton('cancel')">
          取消
        </el-button>
        <el-button type="primary" class="w-170px h-40px" size="large" @click="handleProductCodeButton('download')">
          下载
        </el-button>
      </div>
    </base-dialog>
    <!-- <base-drawer v-model="isShowDrawer" v-bind="drawer">
      <template #header>
        <DrawerHeader :table-row="tableRow" @close="handleClose"></DrawerHeader>
      </template>
      <Detail :form-data="detailParams"></Detail>
    </base-drawer> -->
    <product-detail :visble="showDetail" :current-data="currentData" @hide="handleHideDetail" />
  </base-container>
</template>

<script setup>
  import { searchOption, tableOption, tableOptionChildren } from "@/crudOption/product/ProductNotSynchronous.js";
  import { computed, onMounted } from "vue";
  import useCrudHook from "avue-table/useCrudHook";
  import Detail from "@/views/product/CheckProduct.vue";
  import { ElMessage } from "element-plus";
  import DrawerHeader from "@/views/product/components/DrawerHeader/index.vue";
  import ProductDetail from "./ProductDetail.vue";
  import ProductIconGroup from "./components/ProductIconGroup/index.vue";
  import { flatten } from "lodash";

  const isShowProductCode = ref(false); //商品二维码展示
  const productCode = ref(null); //商品二维码
  const isShowDrawer = ref(false); //详情
  const showDetail = ref(false); //商品二维码弹框
  const currentData = ref({});
  const prductStatusOptions = ref([
    { label: "已售罄", value: 1, type: "info" },
    { label: "未上架", value: 2, type: "warning" },
    { label: "已上架", value: 3, type: "success" },
    { label: "已下架", value: 4, type: "info" },
  ]); //状态
  const tableRow = ref({
    imageUrl: "",
  }); //表格行数据
  //全选
  const handleSelectAll = selections => {
    if (selections.length) {
      const ids = selections.map(item => item.id);
      tableOption.value.expandRowKeys = ids;
      ids.map(item => {
        nextTick(() => {
          if (tableRef.value[item]) {
            tableRef.value[item].toggleAllSelection(true);
          }
        });
      });
    } else {
      tableOption.value.expandRowKeys = [];
    }
  };

  //格式化租赁方案
  const computedFormatterRenPlan = computed(() => {
    return (rentObject = "1,2") => {
      let result = "";
      if (rentObject) {
        result = rentObject.replace("1", "个人").replace("2", "企业");
      }
      return result;
    };
  });
  //租金方案格式化
  const computedFormatterRentPlan = computed(() => {
    return (rentPlan = 1) => {
      if (rentPlan == 1) {
        return "统一方案";
      } else {
        return "指定方案";
      }
    };
  });
  //状态格式化
  const prductStatusLabelComputed = computed(() => {
    return (value = 1) => {
      const item = prductStatusOptions.value.find(item => item.value == value);
      return item.label;
    };
  });
  //状态标签样式类型的获取
  const prductStatusTypeComputed = computed(() => {
    return (value = 1) => {
      const item = prductStatusOptions.value.find(item => item.value == value);
      return item.type;
    };
  });
  //详情
  const drawer = ref({
    size: "80%",
    title: "商品详情",
  });
  const detailParams = ref({}); //商品详情参数
  const tableRef = ref({}); //表格ref
  const tableSelections = ref([]); //表格选中数据

  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    // del: loadDel,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.GetProductPlatformList,
    search: { tabType: "3" },
  });
  // 表格单个选中
  const handleSelect = (selections, row) => {
    if (selections && selections.length) {
      const expandRowKeys = selections.map(item => item.id);
      tableOption.value.expandRowKeys = expandRowKeys;
      nextTick(() => {
        if (tableRef.value[row.id]) {
          tableRef.value[row.id].toggleAllSelection(true);
        }
      });
    } else {
      tableOption.value.expandRowKeys = [];
    }
  };
  //表格批量选中
  const handleSelectionChange = selections => {
    if (selections && selections.length) {
      selections.map(item => {
        tableOption.value.expandRowKeys = [item.id];
        nextTick(() => {
          tableRef.value[item.id].toggleAllSelection(true);
        });
      });
    }
    tableSelections.value = selections;
  };
  //表格展开
  const handleExpandChange = data => {
    console.log(data);
  };
  //表格批量选中子级
  const handleSelectionChildrenChange = (selections, row) => {
    row.skuIds = selections.map(selection => selection.skuIds) || [];
  };
  //批量同库
  const laodProductPlatformRelateSave = data => {
    Api.product.ProductPlatformRelateSave(data).then(res => {
      if (res.code == 200) {
        ElMessage.success(res.message);
        loadGetTableData();
      }
    });
  };
  //批量同步处理
  const handleBatchProcessingDataBaseButton = () => {
    if (tableSelections.value && tableSelections.value.length) {
      const productList = tableSelections.value.map(item => ({ id: item.id, skuIds: flatten(item.skuIds) }));
      laodProductPlatformRelateSave({ productList });
    } else {
      ElMessage.warning("请勾选表格数据");
    }
  };

  //展示商品
  const handleShowProductCode = row => {
    console.log(row);
    isShowProductCode.value = !isShowProductCode.value;
    productCode.value = row;
  };
  const handleProductCodeButton = (type = "cancel") => {
    if (type === "cancel") {
      isShowProductCode.value = !isShowProductCode.value;
      return false;
    }
    if (type === "download") {
      isShowProductCode.value = !isShowProductCode.value;
      return false;
    }
  };
  //详情接口函数

  const loadGetProductDetail = (id = "") => {
    Api.product.getProductDetail({ id }).then(res => {
      let { provinceName, cityName } = res.data.productRentPlanList[0];
      detailParams.value = res.data;
      detailParams.value.periodTypeDesc = res.data.productRentPlanList[0].periodTypeDesc;
      detailParams.value.rentModelTypeDesc = res.data.productRentPlanList[0].rentModelTypeDesc;
      detailParams.value.colors =
        res.data.productRentPlanList[0].productSpecAssociation.productAttributeList[0].childrenList;
      detailParams.value.memory =
        res.data.productRentPlanList[0].productSpecAssociation.productAttributeList[1].childrenList;
      detailParams.value.deliveryPostageDesc = res.data.productRentPlanList[0].deliveryPostageDesc;
      detailParams.value.deliveryAddress = provinceName + cityName;
      detailParams.value.returnPostageDesc = res.data.productRentPlanList[0].returnPostageDesc;
      if (res.data.productRentPlanList[0].productSkuList && res.data.productRentPlanList[0].productSkuList) {
        let productSkuList = res.data.productRentPlanList[0].productSkuList;
        productSkuList.map(item => {
          item.days = item.minDays + "-" + item.maxDays;
        });
      }
      detailParams.value.productSkuList = res.data.productRentPlanList[0].productSkuList;
      detailParams.value.productReturnAddressList = res.data.productRentPlanList[0].productReturnAddressList;
    });
  };
  // 关闭详情
  const handleHideDetail = refresh => {
    showDetail.value = false;
    // currentData.value = {};
  };
  //详情抽屉
  const handleDetailShow = row => {
    // tableRow.value = row;
    // isShowDrawer.value = !isShowDrawer.value;
    // loadGetProductDetail(row.id);
    showDetail.value = true;
    currentData.value = row;
  };
  //关闭抽屉
  const handleClose = () => {
    console.log("关闭");
    isShowDrawer.value = !isShowDrawer.value;
  };

  onMounted(() => {
    loadGetTableData();
  });
</script>
<style lang="scss" scoped>
  .purple {
    color: var(-bd);
  }

  .bg-bd-dark-2-rgb {
    background: var(--bd-dark-2-rgb);
  }

  :deep(.is-active) {
    font-weight: 700;
    font-size: 16px;
    color: #170304;
  }

  :deep(.is-active) {
    font-weight: 700;
    font-size: 16px;
    color: #170304;
  }

  .text-ct5 {
    color: var(--ct5);
  }

  .border-b-ct5 {
    border-bottom: 1px dashed var(--cb1);
  }

  .children-table {
    :deep(.el-table__row) {
      background-color: var(--fl1) !important;
    }

    :deep(.el-scrollbar) {
      margin-top: 2px !important;
    }
  }

  .bg-pink-linear {
    background: linear-gradient(0deg, var(--bd9) 0%, var(--bg) 200px);
  }
</style>
